<template>
  <div class="container">
    <baseTable
      :total="messageListTotal"
      :structure="messageListSc"
      :data="messageListData"
      :form-options="messageSearchForm"
      btn-items="search,reset,export"
      @on-search="onSearch"
      @on-reset="onReset"
      @current-page-change="handleCurrentPageChange"
    >
      <template #operation="{ scope }">
        <el-button style="padding: 5px" type="success" :icon="Edit" text @click="editMessage(scope.row.id)">编辑</el-button>
        <el-button style="padding: 5px" type="danger" :icon="Delete" text @click="deleteMessage(scope.row.id)">删除</el-button>
      </template>
    </baseTable>
    <MessageDialog ref="messageDialogRef" :messageEditForm="messageEditForm" />
  </div>
</template>

<script lang="ts" name="messageList" setup>
  import { ref, reactive, onBeforeMount } from 'vue'
  import { Delete, Edit } from '@element-plus/icons-vue'
  import { messageListSc, messageSearchForm } from '@/components/base-table/config'
  import { deleteMessageRequest, queryMessageListRequest, searchMessageRequest } from '@/network/api/message-api'
  import formatUtcTime from '@/utils/formatTime'
  import { ElMessageBox } from 'element-plus'
  import baseTable from '@/components/base-table/baseTable.vue'
  import notification from '@/utils/notification'
  import MessageDialog from './childComponents/MessageDialog.vue'
  const messageListData = ref([]) // 说说列表数据
  const messageListTotal = ref<number>(0) // 说说列表数据数量
  const messageDialogRef = ref<any>(null) // 编辑框
  const messageEditForm = reactive({
    message_id: 0,
    content: '',
  }) // 编辑框数据对象
  const hasSearchParam = ref(false) // 搜索状态记录
  let searchInfo = reactive({}) // 搜索参数

  // 搜索事件处理
  const onSearch = async (formData: any) => {
    hasSearchParam.value = true
    searchInfo = formData
    const result = await searchMessageRequest(formData)
    messageListData.value = result.result.data
    messageListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
    })
    messageListTotal.value = result.result.total
  }
  // 重置事件处理
  const onReset = async () => {
    hasSearchParam.value = false
    searchInfo = {}
    await messageListPageInit()
  }

  const messageListPageInit = async (currentPage: number = 1) => {
    const result = await queryMessageListRequest(currentPage)
    messageListData.value = result.result.data
    messageListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
    })
    messageListTotal.value = result.result.total
  }

  onBeforeMount(async () => {
    await messageListPageInit()
  })

  const editMessage = (id: any) => {
    const data: any = messageListData.value.find((item: any) => item.id === id)
    messageEditForm.message_id = data.id
    messageEditForm.content = data.content
    messageDialogRef.value.messageVisibleController(true)
  }

  const deleteMessage = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteMessageRequest(id)
      notification.success(result.msg)
      await messageListPageInit()
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    if (hasSearchParam.value) {
      const result = await searchMessageRequest(searchInfo, currentPage)
      messageListData.value = result.result.data
      messageListData.value.forEach((item: any) => {
        item.createAt = formatUtcTime(item.createAt)
      })
      messageListTotal.value = result.result.total
    } else {
      await messageListPageInit(currentPage)
    }
  }
</script>

<style scoped></style>
